<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>


<body>
    <button>点击</button>
    <script>
        class Father {
            constructor(x, y) {
                this.x = x;
                this.y = y;
            }

            sum() {
                console.log(this.x + this.y);
            }
        }
        var that;
        class Son extends Father {
            constructor(x, y) {
                super(x, y); // 使用super传值原因： 父类中sum方法是父类（this） 的 x, y ,不是子类的x,y
                // super必须在子类this之前调用

                that = this;
                this.x = x;
                this.y = y;

                this.btn = document.querySelector('button');
                this.btn.onclick = this.sing;
            }
            // 方法中的this，指向的是调用该方法的对象
            sing() {
                console.log(this); // sing 里面的this 指向的不是Son 而是btn 对象  
                console.log("sing()");
                console.log(this.x); // this并不指向Son,  undefined
                console.log(that.x);
            }
        }
        var son = new Son(1, 3);
        son.sum();
    </script>
</body>

</html>